<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue.set</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <h1>vue.set</h1>
  <hr>
  <div id="app">
    {{count}}
    <ul>
      <li v-for="item in arr">{{item}}</li>
    </ul>
  </div>
  <p><button onclick="add()">add</button></p>
  <script type="text/javascript">
  function add(){
    // Vue.set(outData,'count',2);
    // app.count++;
    // outData.count++;
    // app.arr[1]='dddd';
    // outData.arr[1]='dddd';
    Vue.set(app.arr,1,'dddd');//通过Vue.set方法才能通过数组下标进行更改值
    
  }
  var outData = {
    count:1,
    goods:'car',
    arr:['aaa','bbb','ccc']
  }
  var app = new Vue({
    el:'#app',
    data:outData
  })
  </script>
</body>
</html>